<template>
	<div>
		<Images :images="imgs"></Images>
		<div class="goods-price">
			<p class="price"><em>¥{{gift.price}}</em><s>¥{{gift.retailPrice}}</s><small>已售:{{gift.sellCount}}</small></p>
			<p class="title">{{gift.name}}</p>
		</div>

		<div class="db"></div>
		<div class="detail-content">
			<div class="detail-p">
				<p class="active"><span>礼品详情</span></p>

			</div>
			<div class="content" v-html="gift.detail">
				{{gift.detail}}
			</div>
		</div>

		<ul class="goods-buy">
			<li @click="GoIndex();">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li> <i class="fa fa-heart-o"></i>
				<p>收藏</p>
			</li>

			<li class="cart" @click="AddCart();">
				立即兑换
			</li>
		</ul>

	</div>
</template>

<script>
	import Images from "@/components/common/_imgList.vue"
	export default {
		data() {
			return {
				imgs: [],
				gift: {},
			}
		},
		components: {
			Images
		},
		beforeCreate: function() {
			//组件实例刚刚被创建，但组件属性尚未
			// /alert(config.ApiUrl);
			var id = this.$route.params.id;

			this.$http.post(config.ApiUrl + 'gift/detail/' + id, {}, {
				emulateJSON: true
			}).then(function(res) {
				console.log(res.body.data);
				//this.article = res.body.data;
			}, function(res) {
				//console.log('失败')
			});
			//alert(this.id);
		},
		mounted: function() {
			//let self = this;
			this.$layer.toast({
				icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
				content: '404！未请求到数据接口',
				time: 3000 // 自动消失时间 toast类型默认消失时间为2000毫秒
			});
		},
		methods: {

			GoIndex: function() {
				this.$router.push('/');
			},
			AddCart: function() {
				var spectip = document.getElementById("spectip");
				if (spectip != null && spectip.innerHTML == '请选择规格') {
					this.ShowSpec();
				} else {
					this.$layer.dialog({
							title: ['提示', 'background:red;'], // 第一个是标题内容  第二个是标题栏的style(可以为空)
							content: '正在开发中...',
							contentClass: 'className',
							btn: ['确定'],
							time: 3000
						})
						// 如果有btn
						.then(function(res) {
							// res为0时是用户点击了左边  为1时用户点击了右边
							let position = res === 0 ? 'left' : 'right'
							console.log(position)
						})
				}
			},
			FromSpec: function(e) {
				document.getElementById("spectip").innerHTML = e;

			}

		}

	}
</script>

<style>
	.goods-price,
	.detail-content {
		background-color: #fff;
		padding: 1rem;
		margin-bottom: 2rem;
	}

	.goods-price .price em {
		font-size: 1.6rem;
		vertical-align: middle;
		color: #f92028;
	}

	.goods-price .price s {
		color: #999;
		font-size: 1.2rem;
		vertical-align: -webkit-baseline-middle;
		margin-left: .5rem;
	}

	.goods-price .price small {
		color: #999;
		font-size: 1rem;
		float: right;
		line-height: 2.2;
	}

	.goods-price .title {
		font-size: 1.2rem;
		overflow: hidden;
		line-height: 1.5;
		max-height: 5rem;
	}


	.detail-p {
		display: flex;
	}

	.detail-p .active {
		color: #f44;
	}

	.detail-p .active span {
		border-bottom: 1px solid #f44;
		padding-bottom: .5rem;
	}

	.detail-p p {
		flex: 1;
		text-align: center;
		font-size: 1rem;

	}

	.spec p {
		color: #333;
		font-size: 1rem;
		padding: .5rem 1rem;
	}

	.spec p i {
		float: right;
		font-size: 1.2rem;
	}

	.cart-count {
		width: 1.1rem;
		height: 1.1rem;
		color: white;
		background-color: #FA4802;
		position: absolute;
		left: 60%;
		font-size: xx-small;
		border-radius: 50%;
		top: .1rem;
	}

	.goods-buy {
		display: flex;
		position: fixed;
		width: 100%;
		bottom: 0;
		border-top: 1px solid #f1f1f1;
	}

	.goods-buy li {
		flex: 1;
		height: 3rem;
		text-align: center;
		background-color: white;
		border-right: 1px solid #f1f1f1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.goods-buy li .fa {
		color: #f44;
		font-size: 1.2rem;
	}

	.goods-buy .cart {
		flex: 3;
		color: white;
		background-color: #f44;
		font-size: 1.2rem;
		line-height: 3rem;
	}
</style>
